<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>业力分析报表</a-breadcrumb-item>
      <a-breadcrumb-item>社会风气分析</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">社会风气分析</div>
        <div class="header-subtitle">阴曹地府 · 社风民俗监察</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card social-index">
            <div class="stat-icon">
              <TeamOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">社会风气指数</div>
              <div class="stat-value">{{ socialIndex }}</div>
              <div class="stat-label">分</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card harmony-stat">
            <div class="stat-icon">
              <HeartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">社会和谐度</div>
              <div class="stat-value">{{ harmonyRate }}%</div>
              <div class="stat-label">良好</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card trust-stat">
            <div class="stat-icon">
              <SafetyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">社会信任度</div>
              <div class="stat-value">{{ trustLevel }}%</div>
              <div class="stat-label">持续上升</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card justice-stat">
            <div class="stat-icon">
              <BankOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">社会公正指数</div>
              <div class="stat-value">{{ justiceIndex }}</div>
              <div class="stat-label">稳定</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 社会风气总体趋势 -->
        <a-col :xs="24" :lg="12">
          <a-card title="社会风气总体趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="3">近3年</a-select-option>
                <a-select-option value="5">近5年</a-select-option>
                <a-select-option value="10">近10年</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="socialTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 风气指标雷达图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="社会风气指标评估" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="radarOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区风气对比 -->
        <a-col :xs="24">
          <a-card title="各地区社会风气对比" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="compareMetric" style="width: 120px">
                  <a-select-option value="overall">综合指数</a-select-option>
                  <a-select-option value="harmony">和谐度</a-select-option>
                  <a-select-option value="trust">信任度</a-select-option>
                  <a-select-option value="justice">公正度</a-select-option>
                </a-select>
                <a-button @click="exportRegionData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="regionCompareOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 影响因素分析 -->
        <a-col :xs="24" :lg="16">
          <a-card title="社会风气影响因素分析" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="factorAnalysisOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 风气分析报告 -->
        <a-col :xs="24" :lg="8">
          <a-card title="风气分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>当前状况</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>整体风气向好</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator neutral"></div>
                  <span>地区发展均衡</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator warning"></div>
                  <span>部分指标需关注</span>
                </div>
              </div>

              <div class="report-section">
                <h4>主要趋势</h4>
                <ul class="trend-list">
                  <li>社会信任度持续提升</li>
                  <li>公共秩序稳定改善</li>
                  <li>民众满意度上升</li>
                  <li>社会参与度增强</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>建议措施</h4>
                <ul class="suggestion-list">
                  <li>加强社区建设</li>
                  <li>促进文化交流</li>
                  <li>完善监督机制</li>
                  <li>提升服务质量</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <a-card title="详细数据统计" :bordered="false">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索地区或指标" style="width: 200px" @search="handleSearch" />
            <a-button @click="exportData">
              <ExportOutlined />
              导出全部
            </a-button>
          </a-space>
        </template>
        <a-table :columns="tableColumns" :data-source="tableData" :pagination="tablePagination" :loading="tableLoading" :scroll="{ x: 1200 }" @change="handleTableChange" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { TeamOutlined, HeartOutlined, SafetyOutlined, BankOutlined, DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, RadarChart, PieChart, ScatterChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, RadarComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, RadarChart, PieChart, ScatterChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, RadarComponent])

// 响应式数据
const loading = ref(false)
const trendPeriod = ref('5')
const compareMetric = ref('overall')
const searchKeyword = ref('')
const tableLoading = ref(false)

// 核心指标数据
const socialIndex = ref(85.2)
const harmonyRate = ref(78.6)
const trustLevel = ref(82.3)
const justiceIndex = ref(79.8)

// 表格配置
const tableColumns = reactive([
  {
    title: '地区',
    dataIndex: 'region',
    key: 'region',
    fixed: 'left',
    width: 120
  },
  {
    title: '综合指数',
    dataIndex: 'overallIndex',
    key: 'overallIndex',
    sorter: true,
    render: (value) => `${value}`
  },
  {
    title: '社会和谐度',
    dataIndex: 'harmony',
    key: 'harmony',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '社会信任度',
    dataIndex: 'trust',
    key: 'trust',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '公正指数',
    dataIndex: 'justice',
    key: 'justice',
    sorter: true
  },
  {
    title: '文明程度',
    dataIndex: 'civilization',
    key: 'civilization',
    sorter: true
  },
  {
    title: '社会秩序',
    dataIndex: 'order',
    key: 'order',
    sorter: true
  },
  {
    title: '环境质量',
    dataIndex: 'environment',
    key: 'environment',
    sorter: true
  },
  {
    title: '变化趋势',
    dataIndex: 'trend',
    key: 'trend',
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const icon = value > 0 ? '↗' : value < 0 ? '↘' : '→'
      return {
        children: `${icon} ${Math.abs(value)}%`,
        style: { color }
      }
    }
  }
])

const tableData = ref([])
const tablePagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 图表配置项
const socialTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#6a7985' }
    }
  },
  legend: {
    data: ['社会风气指数', '和谐度', '信任度', '公正度'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '社会风气指数',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: { color: '#52c41a', width: 3 },
      areaStyle: { color: 'rgba(82, 196, 26, 0.3)' },
      data: generateSocialTrendData()
    },
    {
      name: '和谐度',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: { color: '#1890ff', width: 3 },
      areaStyle: { color: 'rgba(24, 144, 255, 0.3)' },
      data: generateHarmonyData()
    },
    {
      name: '信任度',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: { color: '#722ed1', width: 3 },
      areaStyle: { color: 'rgba(114, 46, 209, 0.3)' },
      data: generateTrustData()
    },
    {
      name: '公正度',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: { color: '#fa8c16', width: 3 },
      areaStyle: { color: 'rgba(250, 140, 22, 0.3)' },
      data: generateJusticeData()
    }
  ]
}))

const radarOption = computed(() => ({
  tooltip: {},
  legend: {
    data: ['当前水平', '目标水平', '历史平均'],
    textStyle: { color: '#e6f7ff' }
  },
  radar: {
    indicator: [
      { name: '社会秩序', max: 100 },
      { name: '文明程度', max: 100 },
      { name: '环境质量', max: 100 },
      { name: '服务水平', max: 100 },
      { name: '公共安全', max: 100 },
      { name: '社会参与', max: 100 },
      { name: '文化活力', max: 100 },
      { name: '包容性', max: 100 }
    ],
    name: {
      textStyle: { color: '#91d5ff' }
    },
    splitLine: {
      lineStyle: { color: '#40a9ff', opacity: 0.5 }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(24, 144, 255, 0.1)', 'rgba(24, 144, 255, 0.05)']
      }
    },
    axisLine: {
      lineStyle: { color: '#40a9ff' }
    }
  },
  series: [
    {
      name: '社会风气指标',
      type: 'radar',
      data: [
        {
          value: [85, 78, 82, 79, 88, 75, 81, 83],
          name: '当前水平',
          areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
        },
        {
          value: [90, 85, 88, 85, 92, 80, 85, 87],
          name: '目标水平',
          areaStyle: { color: 'rgba(24, 144, 255, 0.3)' }
        },
        {
          value: [80, 75, 77, 76, 83, 72, 78, 79],
          name: '历史平均',
          areaStyle: { color: 'rgba(250, 140, 22, 0.3)' }
        }
      ]
    }
  ]
}))

const regionCompareOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['综合指数', '和谐度', '信任度', '公正度'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['东胜神洲', '南赡部洲', '西牛贺洲', '北俱芦洲', '天庭', '龙宫', '地府', '仙界'],
    axisPointer: {
      type: 'shadow'
    },
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '综合指数',
      type: 'bar',
      data: [85, 78, 82, 79, 92, 88, 90, 95],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '和谐度',
      type: 'bar',
      data: [80, 75, 79, 76, 89, 85, 87, 92],
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '信任度',
      type: 'bar',
      data: [83, 77, 81, 78, 91, 87, 89, 94],
      itemStyle: { color: '#722ed1' }
    },
    {
      name: '公正度',
      type: 'bar',
      data: [82, 76, 80, 77, 90, 86, 88, 93],
      itemStyle: { color: '#fa8c16' }
    }
  ]
}))

const factorAnalysisOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['影响权重', '当前状态', '改善潜力'],
    textStyle: { color: '#e6f7ff' }
  },
  xAxis: [
    {
      type: 'category',
      data: ['经济发展', '教育水平', '文化建设', '环境治理', '法制建设', '社会保障', '科技创新', '国际交流'],
      axisPointer: {
        type: 'shadow'
      },
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '权重/状态',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value}%',
        color: '#91d5ff'
      },
      axisLine: { lineStyle: { color: '#40a9ff' } },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '改善潜力',
      min: 0,
      max: 50,
      interval: 10,
      axisLabel: {
        formatter: '{value}%',
        color: '#91d5ff'
      },
      axisLine: { lineStyle: { color: '#40a9ff' } },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '影响权重',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        }
      },
      data: [25, 20, 15, 18, 22, 16, 12, 8],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '当前状态',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        }
      },
      data: [85, 78, 72, 80, 88, 75, 82, 70],
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '改善潜力',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        }
      },
      data: [15, 22, 28, 20, 12, 25, 18, 30],
      lineStyle: { color: '#fa8c16', width: 3 },
      itemStyle: { color: '#fa8c16' }
    }
  ]
}))

// 数据生成函数
function generateTimeData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  const currentYear = new Date().getFullYear()

  for (let i = years - 1; i >= 0; i--) {
    data.push(`${currentYear - i}年`)
  }
  return data
}

function generateSocialTrendData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  let baseValue = 75

  for (let i = 0; i < years; i++) {
    baseValue += Math.random() * 4 - 1
    data.push(Math.round(baseValue * 100) / 100)
  }
  return data
}

function generateHarmonyData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  let baseValue = 70

  for (let i = 0; i < years; i++) {
    baseValue += Math.random() * 3 - 0.5
    data.push(Math.round(baseValue * 100) / 100)
  }
  return data
}

function generateTrustData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  let baseValue = 72

  for (let i = 0; i < years; i++) {
    baseValue += Math.random() * 3.5 - 0.8
    data.push(Math.round(baseValue * 100) / 100)
  }
  return data
}

function generateJusticeData() {
  const years = parseInt(trendPeriod.value)
  const data = []
  let baseValue = 74

  for (let i = 0; i < years; i++) {
    baseValue += Math.random() * 3 - 0.3
    data.push(Math.round(baseValue * 100) / 100)
  }
  return data
}

// 生成表格数据
function generateTableData() {
  const regions = ['东胜神洲', '南赡部洲', '西牛贺洲', '北俱芦洲', '天庭', '龙宫', '地府', '仙界', '花果山', '五庄观', '灵山', '蓬莱岛', '昆仑山', '太虚境', '紫霄宫', '瑶池']

  return regions.map((region, index) => ({
    key: index,
    region,
    overallIndex: (75 + Math.random() * 20).toFixed(1),
    harmony: (70 + Math.random() * 25).toFixed(1),
    trust: (72 + Math.random() * 23).toFixed(1),
    justice: (74 + Math.random() * 21).toFixed(1),
    civilization: (76 + Math.random() * 19).toFixed(1),
    order: (78 + Math.random() * 17).toFixed(1),
    environment: (80 + Math.random() * 15).toFixed(1),
    trend: (Math.random() * 10 - 5).toFixed(1)
  }))
}

// 事件处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  tablePagination.current = pagination.current
  tablePagination.pageSize = pagination.pageSize

  if (sorter.field) {
    console.log('排序:', sorter)
  }
}

const exportRegionData = () => {
  message.success('地区数据导出成功')
}

const exportData = () => {
  message.success('全部数据导出成功')
}

// 监听器
watch(trendPeriod, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
})

watch(compareMetric, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 800)
})

// 组件挂载
onMounted(async () => {
  loading.value = true

  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    tableData.value = generateTableData()
    tablePagination.total = tableData.value.length
  } catch (error) {
    message.error('数据加载失败')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.statistics-page {
  min-height: 100vh;
  padding: 24px;
  color: #e6f7ff;
}

.page-breadcrumb {
  margin-bottom: 24px;
}

.page-breadcrumb .ant-breadcrumb-link {
  color: #91d5ff;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  border-radius: 16px;
}

.header-content {
  margin-bottom: 20px;
}

.ancient-title {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #40a9ff, #52c41a, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(64, 169, 255, 0.5);
}

.header-subtitle {
  font-size: 18px;
  color: #91d5ff;
  opacity: 0.8;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40a9ff, transparent);
}

.decoration-symbol {
  font-size: 24px;
  color: #40a9ff;
  text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid .ant-col {
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-card:hover::before {
  transform: translateX(100%);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(64, 169, 255, 0.5);
}

.stat-icon {
  font-size: 32px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-index .stat-icon {
  background: linear-gradient(45deg, #52c41a, #73d13d);
  color: white;
}

.harmony-stat .stat-icon {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: white;
}

.trust-stat .stat-icon {
  background: linear-gradient(45deg, #722ed1, #9254de);
  color: white;
}

.justice-stat .stat-icon {
  background: linear-gradient(45deg, #fa8c16, #ffa940);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #91d5ff;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e6f7ff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #52c41a;
}

.main-content {
  margin-bottom: 32px;
}

.content-grid .ant-col {
  margin-bottom: 32px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.chart-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.chart-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

.echarts-container {
  padding: 16px;
}

.report-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  height: 400px;
}

.report-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.report-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
  height: calc(100% - 56px);
  overflow-y: auto;
}

.report-content {
  padding: 16px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #40a9ff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  border-left: 3px solid #40a9ff;
  padding-left: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e6f7ff;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.8);
}

.status-indicator.neutral {
  background: #1890ff;
  box-shadow: 0 0 6px rgba(24, 144, 255, 0.8);
}

.status-indicator.warning {
  background: #fa8c16;
  box-shadow: 0 0 6px rgba(250, 140, 22, 0.8);
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trend-list li,
.suggestion-list li {
  color: #e6f7ff;
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.trend-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #52c41a;
}

.suggestion-list li::before {
  content: '※';
  position: absolute;
  left: 0;
  color: #40a9ff;
}

.table-section {
  margin-top: 32px;
}

.table-section .ant-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.table-section .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-section .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.table-section .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(24, 144, 255, 0.1);
}

:deep(.ant-pagination) {
  text-align: center;
  margin-top: 24px;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #e6f7ff;
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  color: white;
}

@media (max-width: 768px) {
  .ancient-title {
    font-size: 32px;
  }

  .header-subtitle {
    font-size: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .echarts-container {
    padding: 8px;
  }
}
</style>
